import { Fragment, defineComponent, reactive } from 'vue';
import { zoomContainer, addIcon, subIcon } from './Zoom.module.scss';
import { map } from '@/store';
import { SemiSelect, CloseBold } from '@element-plus/icons-vue';
import { ElIcon } from 'element-plus';
/*
---文件
*/
export const zoomObj = reactive({
    isShow: true,
})

export default defineComponent({
    name: 'Zoom',
    data() {
        return {
            offest: 0.5,
        };
    },
    methods: {
        setZoom(type) {
            let zoomRange = map.fmap.getZoomRange()
            // map.fmap.zoomRange
            if (type == 'add') {
                let temp = map.status.map.zoom + this.offest
                if (temp <= zoomRange[1] && temp >= zoomRange[0]) {
                    map.fmap.setZoom({
                        zoom: temp,
                    });
                    map.status.map.zoom = temp
                }
            } else {
                let temp = map.status.map.zoom - this.offest
                if (temp <= zoomRange[1] && temp >= zoomRange[0]) {
                    map.fmap.setZoom({
                        zoom: temp,
                    });
                    map.status.map.zoom = temp
                }
            }
        }
    },
    render() {
        return <Fragment>
            <div class={zoomContainer} v-if={zoomObj.isShow}>
                <ElIcon class={addIcon} color="#7C858E" size={12}><CloseBold onClick={() => this.setZoom('add')} /></ElIcon>
                <ElIcon class={subIcon} color="#7C858E" size={12}><SemiSelect onClick={() => this.setZoom('sub')} /></ElIcon>
            </div>
        </Fragment>;
    },
});